<template>
	<view class="mydeal">
		<view class="top">
			<view class="header">
				<!-- <searchCom @searchClick="searchFun"></searchCom> -->
				<view class="searchCom">
					<u-icon class="searchCom_img" name="search" size="28"></u-icon>
					<input type="text" placeholder="搜索商户名称、商户UID、门店ID" v-model="searchVal" />
					<view @click="searchFun()">搜索</view>
				</view>
			</view>
			<view class="dealtype dealtype1">
				<contentSw :swlist="conSwlist" @conswitch="dealtypefun1"></contentSw>
			</view>
			<view class="dealtype dealtype2" style="height: 100rpx;">
				<view :class="dealtype2index==0?'target':''" @click="dealtypefun2(0)">
					外卖
					<text class="redfont" v-show="lenObj['0']>0 && dealtype2index==0 && dealtype1index==0">({{lenObj['0']}})</text>
				</view>
				<view :class="dealtype2index==1?'target':''" @click="dealtypefun2(1)">
					费率
					<text class="redfont" v-show="lenObj['1']>0 && dealtype2index==1 && dealtype1index==0">({{lenObj['1']}})</text>
				</view>
				<view :class="dealtype2index==2?'target':''" @click="dealtypefun2(2)">
					店铺
					<text class="redfont" v-show="lenObj['2']>0 && dealtype2index==2 && dealtype1index==0">({{lenObj['2']}})</text>
				</view>
				<view :class="dealtype2index==3?'target':''" @click="dealtypefun2(3)">
					菜品
					<text class="redfont" v-show="lenObj['3']>0 && dealtype2index==3 && dealtype1index==0">({{lenObj['3']}})</text>
				</view>
			</view>
		</view>
		
		<noData v-show="dealArr.length == 0"></noData>
		<!-- 外卖 -->
		<scroll-view v-show="dealtype2index==0 && dealArr.length>0" class="list"
		 scroll-y="true" @scrolltolower="getlist()">
			<view class="list_eve" @click="navDetail(item.suid)" v-for="(item,index) in dealArr" :key="index">
				<view class="list_title">
					<text class="list_title_one">开通外卖审批单</text>
					<view class="list_title_two" v-if="dealtype1index==0">
						<text>查看详情</text><image src="../../static/img/my_back.png"></image>
					</view>
					<view v-else class="list_title_three">
						<view :class="statusColor0[item.first_audit_status]">{{item.statusText0}}</view>
					</view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">商户UID</view>
						<view class="item_text">{{item.uid}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">门店ID</view>
						<view class="item_text">{{item.suid}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">门店名称</view>
						<view class="item_text">{{item.shop_name}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">门店地址</view>
						<view class="item_text">{{item.address}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 费率 -->
		<scroll-view v-show="dealtype2index==1 && dealArr.length>0" class="list"
		 scroll-y="true" @scrolltolower="getlist()">
			<view class="list_eve" @click="navDetail(item.suid)" v-for="(item,index) in dealArr" :key="index">
				<view class="list_title">
					<text class="list_title_one">费率修改审批单</text>
					<view class="list_title_two" v-if="dealtype1index==0">
						<text>查看详情</text><image src="../../static/img/my_back.png"></image>
					</view>
					<view class="list_title_two" v-else>
						<view :class="statusColor1[item.status]">{{item.statusText1}}</view>
					</view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">门店名称</view>
						<view class="item_text">{{item.shop_name}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">门店ID</view>
						<view class="item_text">{{item.suid}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">商户UID</view>
						<view class="item_text">{{item.uid}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">地址</view>
						<view class="item_text">{{item.address}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">提交时间</view>
						<view class="item_text">{{item.submit_time}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 店铺 -->
		<scroll-view v-show="dealtype2index==2 && dealArr.length>0" class="list"
		 scroll-y="true" @scrolltolower="getlist()">
			<view class="list_eve" @click="navDetail(item.id)" v-for="(item,index) in dealArr" :key="index">
				<view class="list_title">
					<text class="list_title_one">店铺信息审批单</text>
					<view class="list_title_two" v-if="dealtype1index==0">
						<text>查看详情</text><image src="../../static/img/my_back.png"></image>
					</view>
					<view class="list_title_two" v-else>
						<view :class="statusColor2[item.status]">{{item.statusText2}}</view>
					</view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">门店名称</view>
						<view class="item_text">{{item.shop_name}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">提交时间</view>
						<view class="item_text">{{item.ctime}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 菜品 -->
		<scroll-view v-show="dealtype2index==3 && dealArr.length>0" class="list"
		 scroll-y="true" @scrolltolower="getlist()">
			<view class="list_eve" @click="navDetail(item.approval_form)" v-for="(item,index) in dealArr" :key="index">
				<view class="list_title">
					<text class="list_title_one">菜品审批单</text>
					<view class="list_title_two">
						<text>查看详情</text><image src="../../static/img/my_back.png"></image>
					</view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">门店名称</view>
						<view class="item_text">{{item.shop_name}}</view>
					</view>
					<view class="list_item">
						<view class="item_title">修改/上传</view>
						<view class="item_text">{{item.goods_num}}个</view>
					</view>
					<view class="list_item">
						<view class="item_title">提交时间</view>
						<view class="item_text">{{item.commit_time}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { verifywaimailist,auditlist,wmmodifylist,verifygoodslist } from '../../api/index.js'
	import searchCom from '../../components/search/searchCom.vue'
	import contentSw from '../../components/workbench/contentSw.vue'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				statusColor0:{
					'1':'orangefont',
					'2':'bluefont',
					'-1':'redfont'
				},
				statusColor1:{
					'0':'orangefont',
					'1':'bluefont',
					'2':'redfont'
				},
				statusColor2:{
					'0':'orangefont',
					'1':'bluefont',
					'-1':'redfont'
				},
				searchVal:'',
				dealtype1index:0,
				dealtype2index:0,
				conSwlist:[{name:'待我处理的'},{name:'我已处理的'}],
				dealArr:[],
				lenObj:{
					'0':0,
					'1':0,
					'2':0,
					'3':0
				},
				isLoad:false,
				isAll:false,
				page:1,
				limit:20
			}
		},
		onLoad:function(){
			
		},
		onShow:function(){
			this.isLoad = false;
			this.isAll = false;
			this.page = 1;
			this.getlist(true)
		},
		methods: {
			dealtypefun1:function(data){
				this.dealtype1index = data.index;
				this.searchVal = '';
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getlist(true)
			},
			dealtypefun2:function(index){
				this.dealtype2index = index;
				this.searchVal = '';
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getlist(true)
			},
			searchFun:function(data){
				// console.log(data);
				// this.searchVal = data.searchComval;
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getlist(true)
			},
			navDetail:function(id){
				uni.navigateTo({
					url:'../mydealdetail/mydealdetail?id='+id+'&type='+this.dealtype2index+'&dealtype='+this.dealtype1index
				})
			},
			//滚动加载函数
			getlist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				let obj = {
					type:that.dealtype1index+1,
					search: that.searchVal,
					keyword: that.searchVal,
					page: that.page,
					pagesize: that.limit
				}
				let index = this.dealtype2index
				if(index == 0){
					verifywaimailist(obj).then((res) => {
						console.log(res)
						that.successLogic(res,isSw)
					}).catch((e) => {
						console.log(e);
					})
				}else if(index == 1){
					obj.type = 'shop_rate';
					obj.status = that.dealtype1index;
					auditlist(obj).then((res) => {
						console.log(res)
						that.successLogic(res,isSw)
					}).catch((e) => {
						console.log(e);
					})
				}else if(index == 2){
					wmmodifylist(obj).then((res) => {
						console.log(res);
						that.successLogic(res,isSw)
					}).catch((e) => {
						console.log(e);
					})
				}else if(index == 3){
					verifygoodslist(obj).then((res) => {
						console.log(res);
						that.successLogic(res,isSw)
					}).catch((e) => {
						console.log(e);
					})
				}
			},
			//列表请求统一处理
			successLogic:function(res,isSw){
				// console.log(res);
				let that = this;
				this.lenObj[this.dealtype2index] = res.data.count||res.data.audit_count||res.data.shop_count;
				if(res.code==0){
					if(isSw === true){//判断是否重新加载数据
						that.dealArr = that.dealList(res.data.list);
					}else{
						that.dealArr = that.dealArr.concat(that.dealList(res.data.list));
					}
					
					that.page += 1;
					that.isLoad = false;
					if(res.data.list.length < that.limit){
						that.isAll = true;
					}
				}else{
					that.isLoad = false;
					that.isAll = false;
				}
			},
			//列表数据统一处理
			dealList:function(data){
				let statusObj0 = { //外卖
					'1':'审核中',
					'2':'审核通过',
					'-1':'审核失败'
				};
				let statusObj1 = { //费率 0-未审核,1-审核通过,2-审核失败
					'0':'审核中',
					'1':'审核通过',
					'2':'审核失败'
				};
				let statusObj2 = { //店铺
					'0':'审核中',
					'1':'审核通过',
					'-1':'审核失败'
				};
				return data.map((item,index,arr)=>{
					return {
						uid:item.uid,//商户uid
						address:item.address,
						shop_name:item.shop_name,
						suid:item.suid,//门店id
						submit_time:item.submit_time,
						status:item.status,
						id:item.id,//店铺-id
						ctime:item.ctime,  //店铺-提交时间
						goods_num:item.goods_num, //菜品-修改/上传
						commit_time:item.commit_time,  //菜品-提交时间
						//外卖-状态 文本 1=待审核 2=审核成功 -1=审核失败 
						statusText0:statusObj0[item.first_audit_status], //外卖
						statusText1:statusObj1[item.status], //费率
						statusText2:statusObj2[item.status], //店铺
						first_audit_status:item.first_audit_status, //外卖-状态
						approval_form:item.approval_form //菜品-审批单号
					}
				});
			}
		},
		components:{
			searchCom,
			contentSw,
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.nodata{
		padding-top: 330rpx;
	}
	
	.searchCom{
		position: relative;
		font-size: $uni-font-size-base;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		.searchCom_img{
			position: absolute;
			left: 26rpx;
			top: 26rpx;
			color: #999999;
		}
		input{
			font-size: $uni-font-size-base;
			border-radius: $uni-border-radius-base;
			padding: 10rpx 30rpx;
			background-color: #EEEEEE;
			width: 75%;
			padding-left: 50rpx;
		}
		view{
			margin-left: 20rpx;
		}
	}
	
	.mydeal{
		font-size: $uni-font-size-base;
		height: 100%;
		background-color: #F5F5F5;
		.top{
			// height: 18%;
			height: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			background-color: #FFFFFF;
			.dealtype{
				color: #666666;
				display: flex;
				justify-content: space-around;
				border-bottom: 1rpx $uni-border-color-e5 solid;
				view{
					&.target{
						color: $uni-color-primary;
						font-weight: bold;
					}
				}
			}
			.dealtype1{
				.contentSw_con{
					width: 100%;
				}
			}
			.dealtype2{
				padding: 30rpx 0;
			}
		}
		.list{
			// height: 82%;
			height: 100%;
			background-color: #F5F5F5;
			padding: 30rpx 30rpx 0 30rpx;
			padding-top: 300rpx;
			box-sizing: border-box;
			.list_eve{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				border-radius: $uni-border-radius-lg;
				margin-top: 30rpx;
				&:nth-child(1){
					margin: 0;
				}
				.list_title{
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx $uni-border-color-e5 solid;
					.list_title_one{
						font-weight: bold;
					}
					.list_title_two{
						display: flex;
						align-items: center;
						color: #999999;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.list_title_three{
						.no_effect{
							font-size: $uni-font-size-sm;
							color: #666666;
							text-align: right;
						}
					}
				}
				.list_con{
					padding: 15rpx 0;
					.list_item{
						display: flex;
						padding: 15rpx 0;
						.item_title{
							width: 25%;
							color: #999999;
						}
						.item_text{
							width: 75%;
						}
					}
				}
			}
		}
	}
</style>
